﻿@model Gateway.Console.Models.Startup
@{
    ViewBag.Title = "Start Page";
    Layout = "";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Gateway Console</title>
    <link href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">Gateway Console</div>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="http://sg.codeplex.com/wikipage?title=Console" target="_blank">Help</a></li>
                </ul>
                @if (Request.IsAuthenticated)
                {
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">@User.Identity.Name</a></li>
                    </ul>
                }
            </div>
        </div>
    </div>
    <div class="container body-content">
        <div class="hero-unit">
            <h2>Welcome to Your Service Gateway Management Console!</h2>
            <p>Before you can start configuring and deploying Service Gateway instances, we need to perform some initialization tasks.</p>
            @if (!Request.IsAuthenticated)
            {
                <h3>Step 1 of 2:</h3>
                <p>
                    Please use the <a href="https://manage.windowsazure.com/gateway.onmicrosoft.com#Workspaces/ActiveDirectoryExtension/directory" target="_blank">Microsoft Azure Portal</a> to create an <strong>Application</strong>
                    in your <i>Azure Active Directory</i> that represents this Management Console.
                </p>
                <p>
                    <strong>Note: The following steps must be performed by a user who is a member of the <i>Global Administrators</i> role in the Directory.</strong>
                </p>
                <ol>
                    <li>
                        Select the name of the <i>Azure Active Directory</i> that you want to add the Application to.
                    </li>
                    <li>
                        Select the <strong>Applications</strong> tab. Click the <b>Add</b> button.
                    </li>
                    <li>
                        Click the option 'Add an application my organization is developing':<br />
                        <img src="~/Content/Images/Add-App-Step-1.png" class="img-responsive img-rounded padded" />
                    </li>
                    <li>
                        Enter a descriptive name for this Application (eg. 'MyApp Gateway Console') - this value is not significant. Select 'Web Application And/Or Web API' as the Type:<br />
                        Click the Next button.<br />
                        <img src="~/Content/Images/Add-App-Step-2.png" class="img-responsive img-rounded padded" />
                    </li>
                    <li>
                        Enter the URL for this application. Copy and paste this value:<br /><br />
                        <div class="alert alert-info"><strong>@Url.Action("Index", "Home", null, "http")</strong></div>
                        Enter the same value in both fields.<br />
                        Click the Next button.<br />
                        <img src="~/Content/Images/Add-App-Step-3.png" class="img-responsive img-rounded padded" />
                    </li>
                    <li>
                        Once the Application has been created in the Directory, you need to make two additional changes to it.<br />
                        Select the 'Configure' tab.<br />
                        Create a Key for this Application by selecting a duration from the drop-down in the 'Keys' section. The value for the newly created key will only be
                        displayed when you click the 'Save' button later.<br />
                        <img src="~/Content/Images/Add-App-Step-5.png" class="img-responsive img-rounded padded" />
                        In the 'Permissions to other applications' section, select 'Windows Azure Active Directory' from the drop-down and then assign the 'Delegated Permissions' value of 'Access your organizations directory'. Following this select 'Windows Azure Service Management API'  and then assign the 'Delegated Permissions' value of 'Access Azure Service Management'.  Both permissions are depicted on the following diagram<br /><br />
                        <img src="~/Content/Images/Add-App-Step-6.png" class="img-responsive img-rounded padded" />
                    </li>
                    <li>
                        Click the 'Save' button.<br />
                        You will need to copy the value of the Client ID field and the value of the Key that you just created. 
                        Save these values in a handy location as you will need to enter them into this configuration in the next step.
                    </li>
                </ol>
                <hr />
                <p>
                    Once you have successfully created an Application in your <i>Azure Active Directory</i>, please click the <strong>Sign In To Continue</strong> button to sign into the application using your
                    <i>Azure Active Directory</i> credentials.
                </p>
                @Html.ActionLink("Sign In To Continue", "Signin", "Home", routeValues: null, htmlAttributes: new { @class = "btn btn-default" })
            }
            else
            {
                <h3>Step 2 of 2:</h3>
                <p>
                    Please enter details from the <i>Azure Active Directory</i> Application that you just created into the fields below.
                    Once you have entered information in all fields, click the <strong>Complete Initialization</strong> button to complete this process.
                </p>
                using (Html.BeginForm())
                {
                    <div class="form-group">
                        @Html.LabelFor(model => model.ClientId)
                        @Html.TextBoxFor(model => model.ClientId, new { @class = "form-control wide" })
                        @Html.ValidationMessageFor(model => model.ClientId)
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.ClientKey)
                        @Html.TextBoxFor(model => model.ClientKey, new { @class = "form-control wide" })
                        @Html.ValidationMessageFor(model => model.ClientKey)
                    </div>
                    <br/>
                    <div class="form-actions no-color">
                        <input id="create" type="submit" value="Complete Initialization" class="btn btn-default">
                    </div>
                }
            }
        </div>
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Microsoft</p>
        </footer>
    </div>

    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script src="//ajax.microsoft.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
</body>

</html>

